<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>添加服务对象地址</title>

		<link rel="stylesheet" type="text/css" href="../css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="../css/own.css" />
		<link rel="stylesheet" type="text/css" href="../css/iconfont.css" />
		<link rel="stylesheet" href="../css/icons-extra.css" />
		<link href="../css/mui.picker.css" rel="stylesheet" />
		<link href="../css/mui.poppicker.css" rel="stylesheet" />
		<style type="text/css">
			/*下面两项是重置muicss的输入框label和input之间的宽比率*/
			
			.mui-input-group.mui-input-row label {
				width: 40%;
			}
			
			.mui-input-row label~input {
				width: 60%;
			}
		</style>
	</head>

	<body style="background-color: #FFFFFF;">
		<header class="mui-bar mui-bar-nav" style="background-color: #FFFFFF;">
			<button type="button" class="mui-action-back mui-btn  mui-btn-link mui-pull-left own-button">
			<span class="mui-action-back mui-icon mui-icon-left-nav own-left-nav-color"></span>
			<span class="own-left-nav-color"></span>
		</button>
			<h1 class="mui-title">添加服务对象地址</h1>
		</header>

		<div class="mui-content" style="background-color: #FFFFFF; text-align: center;">

			<form class="mui-input-group">
				<div class="mui-input-row" style="border-bottom: solid 1px #ffffff;">
					<label>服务对象:</label>
					<input type="text" class="mui-input-clear" id="name">
				</div>
				<div class="mui-input-row" style="border-bottom: solid 1px #ffffff;">
					<label>手机号码:</label>
					<input type="text" class="mui-input-clear" id="phone">
				</div>
				<div class="mui-input-row" style="border-bottom: solid 1px #ffffff;">
					<label>所在地区:</label>
					<input type="text" class="mui-input-clear" id='showCityPicker3' placeholder="请选择">
				</div>

				<div class="mui-input-row" style="border-bottom: solid 1px #ffffff;">
					<label>详细地址:</label>
					<input type="text" class="mui-input-clear" id="address">
				</div>
			</form>

		</div>

		<nav class="mui-bar mui-bar-tab" style="height: 50px;">
			<div class="mui-row">
				<div class="mui-input-row mui-checkbox mui-left mui-col-sm-9 mui-col-xs-9">

					<label style="line-height: 50px;font-size: 20px;">设为默认地址</label>
					<input name="checkbox1" value="Item 1" type="checkbox" style="line-height: 70px;">

				</div>

				<div class="mui-col-sm-3 mui-col-xs-3" style="padding-top: 10px;">
					<button type="button" class="mui-btn mui-btn-success" style="font-size: 20px;" id="sub" onclick=" addAdress()">确认</button>
				</div>
			</div>

		</nav>
		<script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>
		<script src="../js/mui.min.js" charset="UTF-8"></script>
		<script src="../js/own.js" charset="UTF-8"></script>
		<script type="text/javascript" src="../js/url.js"></script>
		<script src="../js/mui.picker.min.js"></script>
		<script src="../js/mui.poppicker.js"></script>
		<script src="../js/city.data.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/city.data-3.js" type="text/javascript" charset="utf-8"></script>
		<script>
			(function($, doc) {
				$.init();
				$.ready(function() {
					//普通示例

					//-----------------------------------------
					//级联示例

					//-----------------------------------------
					//					//级联示例
					var cityPicker3 = new $.PopPicker({
						layer: 3
					});
					cityPicker3.setData(cityData3);
					var showCityPickerButton = doc.getElementById('showCityPicker3');
					//var cityResult3 = doc.getElementById('cityResult3');
					showCityPickerButton.addEventListener('tap', function(event) {
						cityPicker3.show(function(items) {
							showCityPickerButton.value = (items[0] || {}).text + " " + (items[1] || {}).text + " " + (items[2] || {}).text;
							//返回 false 可以阻止选择框的关闭
							//return false;
						});
					}, false);
				});
			})(mui, document);

			function addAdress() {

				var addrList = $("#showCityPicker3").val().split(" ");

				var data = {};
				data.tokenCode = plus.storage.getItem("tokenCode");

				data.accountId = plus.storage.getItem("accountId");

				data.name = $("#name").val();
				data.address = $("#address").val();
				data.phone = $("#phone").val();
				data.province = addrList[0];
				data.city = addrList[1];
				data.area = addrList[2];

				if(data.name == "") {
					alert("姓名不能为空");
					return false;
				}

				if(data.phone == "") {
					alert("手机不能为空");
					return false;
				}

				if(data.area == "") {
					alert("省市区不能为空");
					return false;
				}

				if(data.area == "") {
					alert("省市区不能为空");
					return false;
				}
				if(data.address == "") {
					alert("详细地址不能为空");
					return false;
				}

				if(data.province == "") {
					alert("省市区不能为空");
					return false;
				}

				var re = /^[1][3587]\d{9}$/;
				if(!re.test(data.phone)) {
					alert("电话错误");
					return false;
				}

				$.ajax({
					url: url + 'rest/addUserAddress',
					type: "POST",
					data: data,
					success: function(result) {
						//返回json字符串，转成json对象进行属性获取
						//{"status":"value","msg":"提示信息"}
						// status 为 0  表示 调用成功，为其他值则为失败
						result = JSON.parse(result);
						$("#resultCode").val(result.status);
						$("#resultMsg").val(result.msg);
						if(result.status != '0') {
							mui.alert(result.msg);
						} else {
							mui.toast("成功增加地址信息");

							mui.plusReady(function() {
								plus.storage.setItem("orderName", $("#name").val());
								plus.storage.setItem("orderPhone", $("#phone").val());
								plus.storage.setItem("orderAddr", $("#showCityPicker3").val());
								plus.storage.setItem("orderAddrDetail", $("#address").val());
								//					plus.storage.setItem("orderProvince",addrList[0]);
								//					plus.storage.setItem("orderCity",addrList[1]);
								//					plus.storage.setItem("orderArea",addrList[2]);
							});

							var ws = plus.webview.currentWebview();
							plus.webview.close(ws);

							var list = plus.webview.getWebviewById('template-sub-first.html');
							//触发列表界面的自定义事件（refresh）,
							//alert(list.id);
							mui.fire(list, 'refresh');

						}
					}
				});

			}
		</script>

	</body>

</html>